<template>
    <div class="overflow: auto">
        <div class="query-c">
        名称: <Input v-model="searchParam.name" placeholder="请输入查询内容" style="width: 100px" />
        类型:
        <Select v-model="searchParam.model" clearable style="width:200px">
            <Option v-for="item in devicesList" :value="item.model" :key="item.model">{{ item.model }}</Option>
        </Select>
        <Button type="primary" icon="ios-search" @click="getUserDeviceList()">搜索</Button>
        </div>
        <br>
        <Table border :columns="userDevicesColumns" :data="userDevicesList"></Table>
        <br>
        <Page :total="searchParam.total"  @on-change="pageChange"/>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                userDevicesColumns: [
                    {
                        title: '名称',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '型号',
                        key: 'model'
                    },
                    {
                        title: '版本',
                        key: 'version'
                    },
                    {
                        title: '过期时间',
                        render: (h, params) => {
                            return h('time', params.row.deadline ? this.$utils.formatDate(params.row.deadline) : '无期限');
                        }
                    },{
                        title: '盒子本地IP',
                        key: 'localIp'
                    },{
                        title: '所属用户',
                        key: 'userName'
                    },
                    {
                        title: '状态',
                        key: 'status',
                        render: (h,params) => {
                            //状态 1正常 2未激活 3过期
                            let status = '正常'
                            if(params.row.status == 1)
                                status = '未激活'
                            else if(params.row.status == 3)
                                status = '过期'
                            return h('span', status);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.show(params.index)
                                        }
                                    }
                                }, '查看'),
                                // h('Button', {
                                //     props: {
                                //         type: 'error',
                                //         size: 'small'
                                //     },
                                //     on: {
                                //         click: () => {
                                //             this.delete(params.index)
                                //         }
                                //     }
                                // }, '停用')
                            ]);
                        }
                    }
                ],
                userDevicesList: [],
                devicesList: [],
                searchParam: {name: '', model: '', pageNum: 1, pageSize: 10, total: 0}
            }
        },
        mounted(){
            this.getUserDeviceList()
            this.getDeviceList()
        },
        methods: {
            show (index) {
                this.$Modal.info({
                    title: 'User Info',
                    content: `Name：${this.userDevicesList[index].name}<br>型号:${this.userDevicesList[index].model}<br>版本:${this.userDevicesList[index].version}`
                })
            },
            delete (index) {
                this.userDevicesList.splice(index, 1);
            },
            pageChange(pageNum){
                this.searchParam.pageNum = pageNum
                this.getUserDeviceList()
            },
            getUserDeviceList(){
                let params = {
                    "pageSize": this.searchParam.pageSize,
                    "pageNum": this.searchParam.pageNum,
                    "conditions":[
                        {"key":"name","value":this.searchParam.name,"method":"like"},
                        {"key":"model","value":this.searchParam.model,"method":"eq"}
                    ]
                }

                this.$axios.post('/manager/userDevices/queryList',params).then(res => {
                    if(res.status){
                        this.userDevicesList = res.data.records
                        this.searchParam.total = res.data.total
                    }else{
                        this.$Message.error(res.message);
                    }
                }).catch(error=>{
                    console.error(error)
                })
            },
            getDeviceList(){
                let params = {
                    "pageSize": 100,
                    "pageNum": 1,
                    "conditions":[]
                }

                this.$axios.post('/manager/devices/queryList',params).then(res => {
                    if(res.status){
                        this.devicesList = res.data.records
                    }else{
                        this.$Message.error(res.message);
                    }
                }).catch(error=>{
                    console.error(error)
                })
            }
        }
    }
</script>
